<template>
  <div class="block">
    <el-date-picker
        v-model="intervalTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="pickerOptions">
    </el-date-picker>
    <el-select v-model="selectedRoom" slot="prepend" placeholder="请选择">
      <el-option
          v-for="item in rooms"
          :key="item.id"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
    <el-button @click="queryHygiene">查询</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column prop="checkTime" label="日期" :formatter="formatDate">
      </el-table-column>
      <el-table-column prop="dormitoryAdminName" label="姓名">
      </el-table-column>
      <el-table-column prop="buildingName" label="楼栋">
      </el-table-column>
      <el-table-column prop="roomName" label="房间" >
      </el-table-column>
      <el-table-column prop="grade" label="分数" >
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalNum">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {getRooms, getHygieneByRoom} from '../../../api/dormitory_admin'

export default {
  data () {
    return {
      pageNo: 1,
      pageSize: 10,
      totalNum: 0,
      intervalTime: null,
      rooms: [],
      tableData: [],
      selectedRoom: null,
      lastRoom: null,
      pickerOptions: {
        disabledDate (time) {
          const today = new Date()
          today.setHours(23, 59, 59, 999)
          return time.getTime() > today.getTime()
        }
      }
    }
  },
  methods: {
    formatDate (row) {
      const date = new Date(row.checkTime)
      const beijingTime = new Date(date.getTime())
      const year = beijingTime.getFullYear()
      const month = (beijingTime.getMonth() + 1).toString().padStart(2, '0')
      const day = beijingTime.getDate().toString().padStart(2, '0')
      return `${year}年${month}月${day}日`
    },
    queryRooms () {
      let obj = {
        ID: JSON.parse(localStorage.getItem('user')).id.toString()
      }
      getRooms(obj).then(res => {
        this.rooms = res.data
      })
    },
    handleCurrentChange (newPage) {
      this.pageNo = newPage
      this.queryHygiene()
    },
    queryHygiene () {
      if (this.intervalTime === null || this.intervalTime === '') {
        this.$message({
          type: 'error',
          message: '请选择时间!'
        })
        return
      } else if (this.selectedRoom === null || this.selectedRoom === '') {
        this.$message({
          type: 'error',
          message: '请选择房间!'
        })
        return
      }
      let obj = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        data: {
          ID: JSON.parse(localStorage.getItem('user')).id.toString(),
          roomID: this.selectedRoom.toString(),
          startTime: this.intervalTime[0],
          endTime: this.intervalTime[1]
        }
      }
      if (this.lastRoom !== this.selectedRoom) {
        obj.pageNo = 1
        this.lastRoom = this.selectedRoom
        this.pageNo = 1
        this.totalNum = 0
      }
      getHygieneByRoom(obj).then(res => {
        if (res.status === true) {
          this.tableData = res.data
          this.totalNum = res.otherData.totalNum
        } else {
          this.$message({
            type: 'error',
            message: '查询失败!'
          })
        }
      })
    }
  },
  created () {
    this.queryRooms()
  }
}
</script>
<style>
</style>
